<script setup lang="ts">

import {uesGroupStore} from '@/stores'
import {ref,onMounted} from 'vue'
import {generateUUID} from '@/utils/uuid'
//搜索网页输入框的内容
const title = ref('')
const groupStore = uesGroupStore()
//开始进行搜索
const search = ()=>{
    if(title.value)
    {
        window.location.href = `http://www.baidu.com/s?wd=${title.value}`
    }
    else
    {
        //@ts-ignore
        ElMessage.warning('你脑子是有问题吗？你还没输入内容呢🤣🤣')
    }
    
}
const addTitle = ref('')
const addGroupDialog = ref(false)
const showAddGoupDialog =()=>{
    addGroupDialog.value = true
}
const addGroup =()=>{
    if(addTitle.value)
    {
        const obj = {id:generateUUID(),title:addTitle.value,items:[]}
        groupStore.addGroup(obj)
        addGroupDialog.value = false
        addTitle.value  = ''
    }
    else
    {
        //@ts-ignore
        ElMessage.error('还有内容没输入呢！(～￣▽￣)～')
    }
}
const enterAddGroup = (e:any)=>{
    if(e.key === 'Enter')
    {
        addGroup()
    }
}
//时间
const time = ref('')
const Time = ref('')
onMounted(()=>{
    const week:string[] = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
    const changeTime = ()=>{
        const date = new Date()
        const year = date.getFullYear()
        const month = date.getMonth()+1 < 10 ? '0' + (date.getMonth()+1) : date.getMonth()+1
        const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        const wek = week[date.getDay()]
        const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        time.value = `${hours}:${minutes}`
        Time.value = `${year}年${month}月${day}日 ${wek}`
    }
    setInterval(changeTime,1000)
    changeTime()
})
</script>

<template>
    <div class="box">
        <div class="time">
            <h1>{{time}}</h1>
            <h2>{{Time}}</h2>
        </div>
        <div class="search">
            <SearchInput v-model="title" @search="search"></SearchInput>
        </div>
        <div class="groupitem">
            <GroupCard v-for="(item,index) in groupStore.group" :item="item" :key="item.id"></GroupCard>
            <AddGroup @addGroup="showAddGoupDialog"></AddGroup>
            <el-dialog title="添加新组" width="30%" center v-model="addGroupDialog">
                <div class="input">
                    <p>名称</p>
                    <el-input placeholder="Please input" v-model="addTitle" @keydown="enterAddGroup"/>
                </div>
                <template #footer>
                  <span class="dialog-footer">
                    <el-button type="success" @click="addGroup">
                        确定
                    </el-button>
                    <el-button type="primary" @click="addGroupDialog=false">
                        取消
                    </el-button>
                  </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>
<style scoped>
.box .time
{
    color: white;
    text-align: center;
}
.box .time h1
{
    margin: 0;
    font-size: 100px;
}
.box .time h2
{
    margin: 0;
    margin-bottom: 10px;
    font-size: 20px;
}
.box .search
{
    margin: 0 auto;
    height: 50px;
    width: 60%;
}
.box .groupitem
{
    margin: 30px auto 0;
    width: 70%;
}
</style>